

/***************** 一、获取并渲染概览数据 ********************/
(async function () {

  const res = await axios({
    url: '/dashboard'
  })
  console.log('调统计数据接口返回的数据', res)
  const {overview} =res.data
  for(let k in overview){
    document.querySelector(`[name=${k}]`).innerHTML = overview[k]
  }
  initYear(res.data.year)
  initSalary(res.data.salaryData)
  initGroup(res.data.groupData)
  initGender(res.data.salaryData)
  initMapChart()
})();
const initMapChart = (provinceData) =>{
DataTransferItemList.forEach(item=>{
  const short = item.name
  const obj = provinceData.find(it =>{
    return it.name.includes(short)
  })
  if(obj){
    item.value=obj.value
  }
})
}
const initGender = () =>{
  const myChart = echarts.init(document.querySelector('#gender'))
  const option ={

  }
}
const initYear = (year)=>{
  const myChart = echarts.init(document.querySelector('#line'))
  const option = {

  title: {
    text: '2022全学科薪资走势',
    textStyle: {
      fontSize: 16
    },
    left: 10,
    top: 15
  },

  xAxis: {
    type: 'category',

    data:year.map(item => item.month),

    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ccc'
      }
    },

    axisLabel: {
      color: '#999'
    }
  },
  yAxis: {
    type: 'value',

    splitLine: {
      lineStyle: {
        color: '#ccc',
        type: 'dashed'
      }
    }
  },

  tooltip: {
    trigger: 'axis'
  },

  grid: {
    left: '10%',
    top: '20%'
  },
  color: [
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: '#499bee'
        },
        {
          offset: 1,
          color: '#5b78ef'
        }
      ],
      global: false
    }
  ],
  series: [
    {

      data:year.map(item=>item.salary),
      type: 'line',

      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#93bff4'
            },
            {
              offset: 0.5,
              color: 'rgba(148, 192, 245, 0.1)'
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0.1)'
            }
          ],
          global: false
        }
      },

      smooth: true,

      lineStyle: {
        width: 5
      },

      symbolSize: 10
    }
  ]
  }
  myChart.setOption(option)
}
const initSalary =(salaryData)=>{
  const myChart =echarts.init(document.querySelector(`#salary`))
  const option ={
    title:{
      text:'班级薪资分布',
      textStyle:{
        fontSize:16
      },
      left:20,
      top:15
    },
    tooltip: {
      trigger: 'item'
    },
    color:['#34d399','#3abcfa','#5097ff','#fea225'],
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius:['50%','65%'],
        center:['50%','45%'],
  
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:salaryData.map(item=>{
          return {name:item.label,value:item.g_count + item.b_count}
        })
      }
    ]
  }
  myChart.setOption(option)
}
const initGroup =(groupData)=>{
  const myChart =echarts.init(document.querySelector(`#lines`))
  const option={

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    axisLine: {
      lineStyle: {
        type: 'dashed',
        color: '#ccc'
      }
    },

    axisLabel: {
      color: '#999'
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#ccc',
        type: 'dashed'
      }
    }
  },

  grid: {
    left: 70,
    top: 30,
    right: 30,
    bottom: 50
  },
  color: [
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#3cd59e'
        },
        {
          offset: 1,
          color: 'rgba(59, 213, 157,0.2)'
        }
      ],
      global: false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#4fa2ee'
        },
        {
          offset: 1,
          color: 'rgba(81, 163, 239,0.2)'
        }
      ],
      global: false
    }
  ],
  series: [
    {
      data:groupData[1].map(item =>item.hope_salary),
      type: 'bar'
    },
    {
      data:groupData[1].map(item =>item.salary),
      type: 'bar'
    }
  ]
  }
  myChart.setOption(option)
  const btns = document.querySelector('#btn')
  btns.addEventListener('click',function(e){
    if(e.target.tagName === 'BUTTON'){
      const n = e.target.innerHTML
      console.log(e);
      console.log(groupData(e));
    }
  })
}
